<template>
	<s-page custom-class="Dialog-Page">
		<view class="AddCostContainer">
			<view class="SelectRoomsBox">
				<text>选择房号 {{roomcname}}</text>

				<view class="SelectBox">
					<uni-data-picker class="Building" :localdata="Building" popup-title="请选择楼数" @change="onchange"
						@nodeclick="onnodeclick"></uni-data-picker>

				</view>
				<view class="floors" v-show="showF">
					<!-- <button type="default" v-for="(item,index) in Room" :key="item.id">{{item.Num}}</button> -->
					<uni-data-checkbox class="room" mode="tag" v-model="value" :localdata="Room" @change="change"
						@tap="toAdd()">
					</uni-data-checkbox>
				</view>
			</view>


		</view>
	</s-page>
</template>

<script>
	import Dialog from '@/uni_modules/s-ui/utils/dialog';
	export default {
		data() {
			return {
				isShow: false,
				isBtnShow: false,
				Building: [{
					id: '',
					text: "",
					value: ""
				}],
				Floor: [{
					id: '',
					text: "",
					value: ""
				}],
				Room: [{
					id: '',
					Num: '',
					value: '',
					text: ''
				}],
				filterResult: [{}],
				buildingId: '',
				floorId: '',
				value: 0,
				clickValue: '',
				showF: false,
				showFlag: true,
				BudingNo: '',
				uniqueNo: '',
				floorShow: false,
				roomfname: '',
				roomlname: '',
				roomcname: '',
				roomState:'true'
			}
		},
		onLoad() {
			this.getBuilding()
		},
		methods: {
			toAddReading(uniqueNo) {
				console.log("toAddReading的E=" + uniqueNo)
				this.getRoomState(uniqueNo)
			},
			async getRoomState(uniqueNo) {
				console.log("先看看房间：:",this.uniqueNo)
				const res =await this.$myRequest({
					url: '/api-om/live-in/getState/'+this.uniqueNo,
					method: "post",
				})
				this.roomState=res.body.state;
				console.log("state:",this.roomState)
				if(this.roomState=='false'){
					uni.showToast({
						icon:'error',
						title: "该房间未入住"
					})
				}else{
					uni.navigateTo({
						url: "/pages/meterCheck/AddReading/AddReading?uniqueNo=" + this.uniqueNo + "&cname=" + this
							.roomcname
					})
				}
			},
			floor_onchange(e) {
				const value = e.detail.value
				this.floorId = e.detail.value[0].floorId
				this.house(this.buildingId, this.floorId)
			},
			onchange(e) {
				const value = e.detail.value
				this.roomfname = e.detail.value[0].buildingName

				this.buildingId = e.detail.value[0].buildingId
				this.BudingNo = e.detail.value[0].buildingNo

				// this.getFloor(this.buildingId)
				this.house(this.buildingId, this.floorId)
				this.floorShow = true
			},
			onnodeclick(node) {},

			async getBuilding() {
				const res = await this
					.$myRequest({ //await 关键字 只能放在 async 函数内部， await关键字的作用 就是获取 Promise中返回的内容， 获取的是Promise函数中resolve或者reject的值
						url: '/api-sale/config/house/building/',
						method: "get",
					})
				this.Building = res.body.houseBuilding.data
				let inBuilding = res.body.houseBuilding.data
				console.log("this.Building:", this.Building)
				//第一步 【改数组】 处理分类数据
				for (let i in inBuilding) {
					if (inBuilding[i].buildingId) {
						//把数组的 buildingid字段改名为id
						inBuilding[i].id = inBuilding[i].buildingId;
						//把字段的 楼房名称【buildingName】 改名为title
						inBuilding[i].text =
							"*" + inBuilding[i].buildingName + "*";
						//把数组的 buildingNo字段改名为value
						inBuilding[i].value = inBuilding[i].buildingNo;
					}
				}
				//把处理后的分类数组 赋值
				this.Building = inBuilding;

				this.showF = false
			},

			async getFloor(buildingId) {
				const res = await this
					.$myRequest({
						url: '/api-sale/config/house/floor/?buildingId=' + this.buildingId,
						method: 'get'
					})
				this.Floor = res.body.houseFloor.data
				let inFloor = res.body.houseFloor.data

				//第一步 【改数组】 处理分类数据
				for (let i in inFloor) {
					if (inFloor[i].floorId) {
						//把数组的 floorId字段改名为id
						inFloor[i].id = inFloor[i].floorId;
						//把字段的 楼房名称【floorName】 改名为title
						inFloor[i].text = inFloor[i].floorName;
						//把数组的 floorNo字段改名为value
						inFloor[i].value =
							inFloor[i].floorNo;
					}
				}
				//把处理后的分类数组 赋值
				this.Floor = inFloor;
				this.showF = false
			},

			// 获取房间号
			async house(buildingId, floorId) {
				const res = await this
					.$myRequest({
						// url: '/api-house/api/house/?buildingId=' + this.buildingId +
						// 	"&floorId=" + this.floorId,//原本是分页的现在已经修改了
						url: '/api-house/api/house/?buildingId=' + this.buildingId +
							"&notPage=" + true,//改为不分页了
						method: 'get'
					})
				this.Room = res.data.data
				let inrooms = res.data.data
				let flag = '1'
				if (res.data.totalPage != 1) {
					this.clickValue = '' //清空
					this.uniqueNo = ''
					this.isBtnShow = false
				} else {
					// console.log("2")
					console.log("1")
				}
				//第一步 【改数组】 处理分类数据
				for (let i in inrooms) {
					if (inrooms[i].houseId) {
						//把数组的 houseId字段改名为id
						inrooms[i].id = inrooms[i].houseId;
						//把字段的 房屋名称【houseNo】 改名为num
						inrooms[i].Num = inrooms[i].houseNo;
						//把字段的 房屋名称【houseNo】 改名为text
						inrooms[i].text = inrooms[i].houseNo;
						//把数组的 houseNo字段改名为value
						inrooms[i].value = inrooms[i].houseName;
					}
				}
				//把处理后的分类数组 赋值
				this.Room = inrooms;
				this.showF = true
			},
			change(e) {
				// console.log('e:', e);
				this.uniqueNo = this.BudingNo + "-" + e.detail.data.Num
				this.roomlname = e.detail.data.Num
				this.roomcname = this.roomfname + "-" + this.roomlname


				this.toAddReading(this.uniqueNo)

				this.clickValue = e.detail.data.Num
				if (this.clickValue == '') {
					this.isBtnShow = false
				} else {
					this.isBtnShow = true
				}
			},
			toAdd() {
				uni.navigateTo({
					url: "/pages/meterCheck/AddReading/AddReading?uniqueNo=" + this.uniqueNo
				})
				console.log("单击事件 属性为" + this.clickValue)
			},
			showlight() {
				// this.isShow = !this.isShow
				this.noCancelDialog()
			},
			noCancelDialog() { //s-ui提示
				Dialog({
			  title: '注意',
			 	message: '当前楼宇，楼层无房间入住，请重新选择!',
					showCancel: false,
				}).then(
			  () => {},
					() => {},
				);
			},
		}
	}
</script>


<style>
	.light-box {
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		position: absolute;
		z-index: 999;

		display: flex;
		justify-content: center;
		align-items: center;
	}

	.ps {
		width: 60%;
		height: 300rpx;
		background-color: #FFFFFF;
		border-radius: 10rpx;
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 50rpx;
	}

	.ps .btn {
		position: absolute;
		bottom: 0;
		font-size: 36rpx;
		background-color: #EBEFF6;
		width: 100%;
		height: 70rpx;
		text-align: center;
		line-height: 70rpx;
	}

	.AddCostContainer {
		display: flex;
		justify-content: center;
	}

	.SelectRoomsBox {
		width: 632rpx;
		padding-top: 60rpx;
	}

	.SelectBox {
		display: flex;
		justify-content: space-between;
		margin: 24rpx 0 40rpx 0;
	}

	.Building,
	.floor {
		background-color: #FFFFFF;
		border-radius: 10rpx;
		width: 300rpx;
	}

	.floors {
		padding: 0;
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
	}

	.floors:nth-child {
		width: 190rpx;
		/* background-color: #109EF8; */
		background-color: #FFFFFF;

		font-size: 32rpx;


		border: none;

		margin-bottom: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	button:active {
		background-color: #109EF8;
		color: #FFFFFF;
	}

	.sub_button {
		height: 38px;
		width: 90.6%;
		background-color: #109EF8;
		color: #FFFFFF;
		line-height: 38px;
		text-align: center;
		margin: 48px auto 0 auto;
		border-radius: unset;
	}
</style>
